<template>
  <div id="Xq">
    <section class="ding">
      <section class="oding">
        <section class="o1" @click="fun1()">
          <span class="iconfont icon-fanhui1"></span>
        </section>
        <section class="o2">
          <img src="images/50.jpg" />
        </section>
      </section>
    </section>

    <!-- 鞋在这 -->
    <section></section>
    <section class="main">
      <section class="xie">
        <img :src="this.list.ximg" />
      </section>
      <!-- <section class="flei"></section> -->
      <section class="shoesxx">
        <section class="xx1">
          <section class="xx1-left">￥{{ this.list.xprice }}</section>
          <section class="xx1-right">{{ this.list.xman }}万人+付款</section>
        </section>
        <section class="xx2">支持分期付款，最低月付480元</section>
        <section class="xx3">
          {{ this.list.xtitle }}
          <!-- {{this.$store.state.text}} -->
        </section>
      </section>
      <Xqdi></Xqdi>
      <section class="qiTa">
        <img src="images/51.jpg" />
      </section>
      <section class="oqiTa"></section>
    </section>

    <!-- 立即购买 -->
  </div>
</template>

<script>
import Xqdi from "@/components/Xqdi.vue";
export default {
  components: {
    Xqdi,
  },
  data() {
    return {
      list: {},
    };
  },
  methods: {
    fun1() {
      this.$router.go(-1);
    },
  },
  created() {
    this.list = this.$route.query.list;
  },
};
</script>

<style scoped>
#Xq {
  width: 100%;
  height: 100%;
  background-color: #fefefe;
}
#Xq .ding {
  width: 100%;
  height: 0.42rem;
  /* background-color: sandybrown; */
  padding-top: 0.19rem;
}
#Xq .ding .oding {
  width: 100%;
  height: 0.23rem;
  /* background-color: slateblue; */
  display: flex;
  justify-content: space-between;
  align-content: center;
  padding-left: 0.2rem;
  padding-right: 0.2rem;
}
#Xq .ding .oding .o1 {
  width: 0.12rem;
  height: 100%;
  /* background-color: steelblue; */
}
#Xq .ding .oding .o2 {
  width: 1.21rem;
  height: 100%;
  /* background-color: thistle; */
}
#Xq .ding .oding .o2 img {
  width: 100%;
  height: 100%;
}
#Xq .main {
  width: 100%;
  height: 100%;
  overflow: auto;
}
#Xq .xie {
  width: 100%;
  height: 3.03rem;
  /* background-color: cornflowerblue; */
}
#Xq .xie img {
  width: 100%;
  height: 100%;
}
/* #Xq .flei {
  width: 100%;
  height: 1.09rem;
  background-color: darkgray;
} */
#Xq .shoesxx {
  width: 100%;
  height: 1.02rem;
  /* background-color: darksalmon; */
}
#Xq .shoesxx .xx1 {
  width: 100%;
  height: 0.28rem;
  /* background-color: gold; */
  display: flex;
  justify-content: space-between;
  align-content: center;
}
#Xq .shoesxx .xx1 .xx1-left {
  width: 0.52rem;
  height: 100%;
  /* background: greenyellow; */
  font-weight: 700;
  font-size: 0.2rem;
}
#Xq .shoesxx .xx1 .xx1-right {
  width: 0.8rem;
  /* background: cornflowerblue; */
  font-size: 0.08rem;
  color: slategray;
  -webkit-transform: scale(0.833);
  text-align: center;
  line-height: 0.28rem;
}
#Xq .shoesxx .xx2 {
  width: 100%;
  height: 0.34rem;
  /* background: cyan; */
  font-size: 0.12rem;
  color: slategray;
  line-height: 0.34rem;
  padding-left: 0.2rem;
}
#Xq .shoesxx .xx3 {
  width: 100%;
  height: 0.42rem;
  line-height: 0.42rem;
  padding-left: 0.2rem;
}
#Xq .qiTa {
  width: 3.57rem;
  height: 2.25rem;
  /* background-color: dimgrey; */
  margin: auto;
}
#Xq .qiTa img {
  width: 100%;
  height: 100%;
}
#Xq .oqiTa {
  width: 100%;
  height: 3rem;
  opacity: 0;
}
</style>